<template>
  <div class="book">
    <title-bar
    :ifTitleAndMenuShow="ifTitleAndMenuShow"></title-bar>
    <div class="read-wrapper">
        <div id="read"></div>
        <div class="mask">
            <div class="left" @click="prevPage"></div>
            <div class="center" @click="toggleTitleAndMenu"></div>
            <div class="right" @click="nextPage"></div>
        </div>
    </div>
    <menu-bar
    :ifTitleAndMenuShow="ifTitleAndMenuShow"
    :fontSizeList="fontSizeList"
    :defaultFontSize="defaultFontSize"
    @setFontSize="setFontSize"
    :themesList="themesList"
    :defaultTheme="defaultTheme"
    @setTheme="setTheme"
    :bookAvailable="bookAvailable"
    @onProgressChange="onProgressChange"
    :navigation="navigation"
    @jumpTo="jumpTo"
    ref="menuBar"></menu-bar>
  </div>
</template>

<script>
// 1.引入组件
import TitleBar from '@/components/TitleBar'
import MenuBar from '@/components/MenuBar'

import Epub from 'epubjs'
const BOOK_URL = '/static/theGreatGatsby.epub'
global.ePub = Epub
export default {
    // 2.引入组件
    components: {
        TitleBar,
        MenuBar
    },
    data() {
        return {
            ifTitleAndMenuShow: false,
            fontSizeList: [
                {fontSize: 12},
                {fontSize: 14},
                {fontSize: 16},
                {fontSize: 18},
                {fontSize: 20},
                {fontSize: 22},
                {fontSize: 24},
            ],
            defaultFontSize: 16,
            themesList: [
                {
                    name: 'default',
                    style: {
                        body: {
                            'color': '#000',
                            'background': '#fff',
                        }
                    }
                },
                {
                    name: 'eye',
                    style: {
                        body: {
                            'color': '#000',
                            'background': '#ceeaba',
                        }
                    }
                },
                {
                    name: 'night',
                    style: {
                        body: {
                            'color': '#fff',
                            'background': '#000',
                        }
                    }
                },
                {
                    name: 'gold',
                    style: {
                        body: {
                            'color': '#000',
                            'background': 'rgb(241, 236, 226)',
                        }
                    }
                }
            ],
            defaultTheme: 0,
            bookAvailable: false,
            navigation: {}

        }
    },
    // 电子书的渲染
    methods: {
        jumpTo(href) {
            this.rendition.display(href)
            this.hideTitleAndMenu()
        },
        hideTitleAndMenu() {
            // 隐藏标题栏和菜单栏
            this.ifTitleAndMenuShow = false
            // 隐藏菜单栏弹出的设置栏
            this.$refs.menuBar.hideSetting()
            // 隐藏目录
            this.$refs.menuBar.hideContent()
        },
        // 改变阅读进度
        // 进度条的数值 progress：0-100
        onProgressChange(progress) {
            const percentage = progress / 100
            // console.log(percentage)
            const location = percentage>0? this.locations.cfiFromPercentage(percentage) : 0;
            // console.log(location)
            this.rendition.display(location)
        },
        setTheme(index) {
            this.themes.select(this.themesList[index].name)
            this.defaultTheme = index
        },
        registerThemes() {
            this.themesList.forEach(theme => {
                this.themes.register(theme.name, theme.style)
            });
        },
        setFontSize(fontSize) {
            this.defaultFontSize = fontSize
            // console.log(this.themes)
            if (this.themes) {
                this.themes.fontSize(fontSize + 'px')
            }
        },
        toggleTitleAndMenu() {
            this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow
            if (!this.ifTitleAndMenuShow) {
               this.$refs.menuBar.hideSetting()
            }
        },
        showEpub () {
            // 生成Book
            this.book = new Epub(BOOK_URL)
            // console.log(this.book)
            // 生成Rendition 通过Book.renderTo
            this.rendition = this.book.renderTo('read',{
                width: window.innerWidth,
                height: window.innerHeight,
            })
            // 渲染电子书
            this.rendition.display()
            // 获取主题对象
            this.themes = this.rendition.themes
            // 设置默认字体
            this.themes.fontSize(this.defaultFontSize + 'px')
            // 主题切换
            // this.themes.register(name, styles)
            // this.themes.select(name)
            this.registerThemes()
            this.setTheme(this.defaultTheme)
            // this.themes.select('night')
            // 获取locations对象
            // 获取epub.js的对象
            this.book.ready.then(() => {
                this.navigation = this.book.navigation
                console.log(this.navigation)
                return this.book.locations.generate()
            }).then(result => {
                this.locations = this.book.locations
                // console.log(result)
                // this.onProgressChange(100)
                this.bookAvailable = true
            })
        },
        prevPage () {
            // Rendition.prve
            if (this.rendition) {
                this.rendition.prev()
            }
        },
        nextPage () {
            if (this.rendition) {
                this.rendition.next()
            }
        }
    },
    mounted () {
        this.showEpub()
    }
  
}
</script>

<style lang="scss" scoped>
@import 'assets/styles/global';
.book {
    position: relative;
    .read-wrapper {
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            // 弹性布局 flex
            display: flex;
            // background: yellow;
            .left {
                // background: red;
                flex: 0 0 px2rem(100);
            }
            .center {
                flex: 1;
            }
            .right {
                // background: yellow; 
                flex: 0 0 px2rem(100);
            }
        }
    }
    
}
</style>
